<!--
 * @Author: your name
 * @Date: 2021-07-20 14:21:01
 * @LastEditTime: 2021-10-21 14:49:52
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \usp-osm-frondend\src\views\orderCenter\returnOrder\details.vue
-->
<template>
  <div
    class="white-content"
    v-loading="pageLoading"
    element-loading-text="loading"
  >
    <div class="newPageTitle">
      <span class="backIcon" @click="goBack"><i class="el-icon-back"></i></span>
      <h1 style="display: inline-block; margin-left: 10px; font-weight: bold">
        退货单详情
      </h1>
    </div>
    <div class="detail-content-section">
      <h2>
        <span>退货单号：{{ datas.returnNo }}</span>
        <span style="float: right">
          退货单状态：{{
            getDictionaryNameByCode('RETURNMAINSTATUS', datas.returnStatus)
          }}
        </span>
      </h2>
      <el-form label-width="auto">
        <el-row :gutter="40">
          <el-col :span="8">
            <el-form-item label="关联主订单号：">
              <span @click="masterDetails(datas.orderId)" class="colorLink">
                {{ datas.orderNo }}
              </span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="关联子订单号：">
              <span @click="subDetails(datas.subOrderId)" class="colorLink">
                {{ datas.subOrderNo }}
              </span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="子订单类型：">
              {{ getDictionaryNameByCode('SUBORDERTYPE', datas.subOrderType) }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="40">
          <el-col :span="8">
            <el-form-item label="用户ID：">{{ datas.customerId }}</el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="用户姓名：">
              {{ datas.customerName }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="用户手机号：">
              {{ datas.customerMobile }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="40">
          <el-col :span="8">
            <el-form-item label="用户邮箱：">
              {{ datas.customerEmail }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="VIN：">{{ datas.vin }}</el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="退货单创建时间：">{{ datas.createTime | timestampToChange('time') }}</el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="40">
          <el-col :span="8">
            <el-form-item label="退货单更新时间：">{{ datas.updateTime | timestampToChange('time') }}</el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="detail-content-section">
      <h2>退货物流信息</h2>
      <el-form label-width="auto" label-position="left">
        <el-row :gutter="40">
          <el-col :span="6">
            <el-form-item label="快递公司：">
              {{ datas.returnLogisticsCompany }}
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="快递单号：">
              {{ datas.returnLogisticsNo }}
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="运费金额：">
              {{ getPoint(datas.returnFreight) }}
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="退货寄回方式：">
              {{ getDictionaryNameByCode('RETURNMETHOD', datas.returnMethod) }}
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="detail-content-section">
      <h2>退货订单信息</h2>
      <div class="table-btn">
        <!-- <el-button
          class="dark-btn"
          :disabled="isAgree"
          @click="toApply('approve')"
          v-if="$auth('orderManagement:returnNote:agreeToTeturn')"
          >同 意
        </el-button> -->
        <!-- <el-button
          class="dark-btn"
          :disabled="isRefuse"
          @click="toApply('reject')"
          v-if="$auth('orderManagement:returnNote:rejectOfTeturn')"
          >拒 绝
        </el-button> -->
        <el-button
          class="dark-btn"
          :disabled="isAgree"
          @click="toApply"
          >审 批
        </el-button>
        <el-button
          class="dark-btn"
          @click="addReturnInfo"
          :disabled="this.datas.returnMethod !== '2'"
          v-if="$auth('orderManagement:returnNote:addReturnInformation')"
          >增加退货信息
        </el-button>
        <el-button
          class="dark-btn"
          @click="toViewer"
          v-if="$auth('orderManagement:returnNote:viewPicturesOfReturn')"
          >查看退货图片
        </el-button>
        <el-button
          class="dark-btn"
          @click="getRemarks"
          v-if="$auth('orderManagement:returnNote:reviewRemark')"
          >查看备注
        </el-button>
      </div>
      <el-table :data="tableData">
        <!-- <el-table-column type="selection" width="55"> </el-table-column> -->
        <el-table-column
          label="商品名称"
          prop="spuName"
          align="center"
          min-width="120"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          label="退货商品状态"
          prop="returnStatus"
          align="center"
          min-width="120"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            <span>
              {{
                getDictionaryNameByCode('RETURNSTATUS', scope.row.returnStatus)
              }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          label="SKU Code"
          prop="skuCode"
          align="center"
          min-width="120"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          label="SPU Code"
          prop="spuCode"
          align="center"
          min-width="120"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          label="退货数量"
          prop="quantity"
          align="center"
          min-width="80"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          label="金额"
          prop="returnAmount"
          align="center"
          min-width="80"
          :show-overflow-tooltip="true"
        >
        <template slot-scope="scope">
          {{ scope.row.returnAmount | numFormat }}
        </template>
        </el-table-column>
        <el-table-column
          label="申请渠道"
          prop="applicationChannel"
          align="center"
          min-width="80"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          label="退货原因"
          align="center"
          prop="returnReason"
          min-width="120"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <!-- <el-table-column
          label="申请时间"
          prop="createTime"
          align="center"
          min-width="160"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            {{ scope.row.createTime | timestampToChange('time') }}
          </template>
        </el-table-column>
        <el-table-column
          label="更新时间"
          prop="updateTime"
          align="center"
          min-width="160"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            {{ scope.row.updateTime | timestampToChange('time') }}
          </template>
        </el-table-column> -->
        <el-table-column
          label="操作"
          fixed="right"
          align="center"
          min-width="120"
        >
          <template slot-scope="scope">
            <el-row>
              <el-col :span="18">
                <span
                  class="colorLink"
                  @click="receivingInfo(scope.row)"
                  v-if="$auth('orderManagement:returnNote:viewUserInformation')"
                  >查看收货信息</span
                >
              </el-col>
            </el-row>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <apply-dialog
      :refundId="id"
      :dialogTableData="tableData"
      :returnStatusDialog="dialogReturnStatus"
      :deliveryMethodDialog="deliveryMethod"
      :selectList="operationAmount"
      @fetchRelationList="fetchList"
      :isShow="showApply"
      :isApprove="isApprove"
    ></apply-dialog>
    <remarks-dialog
      :tableData="remarksData"
      :isShow="showRemarks"
      :loading="pageLoading"
    ></remarks-dialog>
    <el-dialog
      :visible.sync="seeNoteDialog"
      title="仓库收货信息"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :destroy-on-close="true"
      :wrapperClosable="false"
      :element-loading-text="'加载中'"
      width="45%"
      append-to-body
      top="10px"
    >
      <div v-if="isReturned">
        <el-form ref="form" :model="deliveryForm" label-width="100px">
          <el-form-item label="包装是否完好">
            <el-radio-group v-model="deliveryForm.isPackageGood" disabled>
              <el-radio label="Y"></el-radio>
              <el-radio label="N"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="货物是否破损">
            <el-radio-group v-model="deliveryForm.isGoodsDamage" disabled>
              <el-radio label="Y"></el-radio>
              <el-radio label="N"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="备注">
            <el-input
              type="textarea"
              disabled
              v-model="deliveryForm.remark"
            ></el-input>
          </el-form-item>
        </el-form>
        <div class="dialog-footer" style="float: right">
          <el-button @click="seeNoteDialog = false">关 闭</el-button>
        </div>
      </div>
      <div v-else style="padding: 30px">暂无信息</div>
    </el-dialog>
    <el-dialog
      :visible.sync="isDeliveryDialog"
      title="确认收货"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :destroy-on-close="true"
      :wrapperClosable="false"
      :element-loading-text="'加载中'"
      width="45%"
      append-to-body
      top="10px"
    >
      <span> 点击【确定】后，此产品将进入退款流程 </span>
      <div class="dialog-footer">
        <el-button class="search-btn" @click="onSubmit">确 定</el-button>
        <el-button @click="isDeliveryDialog = false" style="margin-left: 20px"
          >取 消</el-button
        >
      </div>
    </el-dialog>
    <el-dialog
      :visible.sync="successDialog"
      title="退货成功"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :destroy-on-close="true"
      :wrapperClosable="false"
      :element-loading-text="'加载中'"
      width="45%"
      append-to-body
      top="10px"
    >
      <span> 退货成功，已生成 <span class="colorLink" @click="toReturnedNo">{{returnedNo}}</span>，请前往查看 </span>
      <div class="dialog-footer">
        <el-button @click="successDialog = false" style="margin-left: 20px"
          >关 闭</el-button
        >
      </div>
    </el-dialog>
    <el-dialog
      :visible.sync="addReturnInfoDialog"
      title="请输入退货物流信息:"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      @open="openDialog"
      :wrapperClosable="false"
      :element-loading-text="'加载中'"
      width="50%"
      append-to-body
      top="10px"
    >
      <div>
        <el-form ref="addReturnInfoForm" :model="addReturnInfoForm" size="small" label-width="100px">
          <el-form-item label="快递公司：">
            <el-input
              clearable
              :disabled="inputDisable"
              v-model="addReturnInfoForm.returnLogisticsCompany"
            ></el-input>
          </el-form-item>
          <el-form-item label="快递单号：" class="addReturnInfoCentent">
            <el-input
              clearable
              :disabled="inputDisable"
              v-model="addReturnInfoForm.returnLogisticsNo"
            ></el-input>
          </el-form-item>
          <el-form-item label="运费金额：">
            <el-input
              type="number"
              clearable
              @blur="actualRefundAmountBlur"
              :disabled="inputDisable"
              v-model="addReturnInfoForm.returnFreight"
            ></el-input>
          </el-form-item>
        </el-form>
        <div class="dialog-footer" style="float: right">
          <el-button @click="addReturnInfoSubmit" v-if="!inputDisable">确 定</el-button>
          <el-button @click="addReturnInfoDialog = false">关 闭</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Vue from 'vue'
import { USERNAME, USERID } from '@/config/variableInit'
import ApplyDialog from '../components/apply.vue'
import RemarksDialog from '../components/remarks.vue'
import {
  returnDetails,
  checkRemark,
  approvalReturn,
  getReceivingInfo
} from '@/api/product'
import { addReturnInfo } from '@/api/order'
import { common } from '@/mixins/common'
import { mapGetters } from 'vuex'
import { setRouterParams, getRouterParams } from '@/utils/auth'
export default {
  name: 'returnOrderDetails',
  components: { ApplyDialog, RemarksDialog },
  mixins: [common],
  computed: {
    ...mapGetters(['lookupItems'])
  },
  data () {
    return {
      datas: {},
      deliveryForm: {
        isPackageGood: '',
        isGoodsDamage: '',
        remark: ''
      },
      addReturnInfoForm: {
        returnLogisticsCompany: '',
        returnLogisticsNo: '',
        returnFreight: ''
      },
      id: 0,
      dialogTitle: '',
      dialogReturnStatus: '',
      deliveryMethod: '',
      returnedNo: '',
      returnedId: '',
      userName: '',
      userId: '',
      showBtnAgree: false,
      showBtnRefuse: false,
      isAgree: true,
      isRefuse: true,
      tableData: [],
      applyTitle: '同意退货申请',
      showApply: false,
      isDeliveryDialog: false,
      addReturnInfoDialog: false,
      successDialog: false,
      isReturned: false,
      inputDisable: false,
      isApprove: true,
      remarksData: [],
      selectionList: [],
      operationAmount: [],
      showRemarks: false,
      seeNoteDialog: false,
      pageLoading: false
    }
  },
  mounted () {
    this.userName = Vue.ls.get(USERNAME)
    this.userId = Vue.ls.get(USERID)
    this.id = this.$route.params.id
    if (this.id) {
      setRouterParams(this.$route)
      this.fetchList()
    } else {
      const routeParams = getRouterParams(this.$route)
      this.id = routeParams.id
      this.fetchList()
    }
  },
  methods: {
    getRemarks () {
      this.showRemarks = true
      this.checkRemark(this.id)
    },
    fetchList () {
      this.pageLoading = true
      const params = {
        id: this.id
      }
      returnDetails(params).then((res) => {
        this.pageLoading = false
        if (res) {
          if (Number(res.code) === 1) {
            const obj = res.obj
            this.datas = obj || {}
            this.dialogReturnStatus = obj.returnStatus || ''
            this.deliveryMethod = obj.deliveryMethod || ''
            this.tableData = obj.list
            if (this.dialogReturnStatus === '1' || this.dialogReturnStatus === '2') {
              this.isAgree = false
            } else {
              this.isAgree = true
            }
            this.addReturnInfoForm.returnLogisticsCompany = obj.returnLogisticsCompany
            this.addReturnInfoForm.returnLogisticsNo = obj.returnLogisticsNo
            this.addReturnInfoForm.returnFreight = obj.returnFreight
          } else {
            this.$confirm(res.code, {
              confirmButtonText: '确定',
              showCancelButton: false
            })
          }
        }
      })
    },

    checkRemark (row) {
      this.pageLoading = true
      const params = {
        id: row,
        owerType: '1'
      }
      checkRemark(params).then((res) => {
        this.pageLoading = false
        if (res) {
          if (Number(res.code) === 1) {
            const obj = res.obj
            this.remarksData = obj.list
          } else {
            this.$confirm(res.code, {
              confirmButtonText: '确定',
              showCancelButton: false
            })
          }
        }
      })
    },

    toViewer () {
      this.$router.push({ name: 'previewImgs', params: { id: this.id, type: '1' } })
    },
    openDialog () {
      if (this.addReturnInfoForm.returnLogisticsCompany) {
        this.inputDisable = true
      }
    },
    actualRefundAmountBlur () {
      this.addReturnInfoForm.returnFreight = Number(this.addReturnInfoForm.returnFreight).toFixed(2)
    },
    receivingInfo (row) {
      this.deliveryForm = {}
      this.seeNoteDialog = true
      if (row.returnStatus === '5') {
        this.isReturned = true
      } else {
        this.isReturned = false
      }
      const params = {
        id: row.id,
        owerType: '1'
      }
      getReceivingInfo(params).then((res) => {
        this.pageLoading = false
        if (res) {
          if (Number(res.code) === 1) {
            const obj = res.obj
            if (obj.list[0]) {
              this.deliveryForm = obj.list[0]
              this.isReturned = true
            }
          } else {
            this.$confirm(res.code, {
              confirmButtonText: '确定',
              showCancelButton: false
            })
          }
        }
      })
    },
    closeApply () {
      this.showApply = false
      this.applyTitle = '同意退货申请'
      this.isApprove = true
    },
    toApply () {
      this.showApply = true
    },
    handleSelectionChange (val) {
      this.selectionList = val
      if (this.selectionList.every(e => e.returnStatus === '1')) {
        this.showBtnAgree = true
      } else {
        this.showBtnAgree = false
      }
      if (this.selectionList.every(e => e.returnStatus === '6')) {
        this.showBtnRefuse = true
      } else {
        this.showBtnRefuse = false
      }
      if (this.selectionList.some(e => e.returnStatus === '2' || e.returnStatus === '4' || e.returnStatus === '5')) {
        this.isAgree = true
        this.isRefuse = true
      } else {
        this.isAgree = false
        this.isRefuse = false
      }
    },
    goBack () {
      this.$router.go(-1)
    },
    masterDetails (id) {
      this.$router.push({ name: 'masterOrderDetails', params: { id: id } })
    },
    subDetails (id) {
      this.$router.push({ name: 'suborderDetails', params: { id: id } })
    },
    toReturnedNo () {
      this.$router.push({ name: 'refundOrderDetails', params: { id: this.returnedId } })
    },
    addReturnInfo () {
      this.addReturnInfoDialog = true
    },
    addReturnInfoSubmit () {
      const params = {
        id: this.id,
        ...this.addReturnInfoForm,
        type: '1'
      }
      addReturnInfo(params)
        .then((res) => {
          this.pageLoading = false
          if (res) {
            if (Number(res.code) === 1) {
              this.$confirm('操作成功', {
                confirmButtonText: '确定',
                showCancelButton: false
              })
            } else {
              this.$confirm(res.code, {
                confirmButtonText: '确定',
                showCancelButton: false
              })
            }
          }
          this.addReturnInfoDialog = false
          this.fetchList()
        })
        .catch(() => {
          this.addReturnInfoDialog = false
        })
    },
    onSubmit () {
      this.auditRecordVoList = []
      this.itemVoList = []
      if (this.isApprove) {
        this.operationAmount.forEach((e) => {
          this.auditRecordVoList.push({
            operationId: this.userId,
            operationName: this.userName,
            owerType: 1,
            ownerId: e.id,
            statue: 1,
            type: 2
          })
          this.itemVoList.push({
            id: e.id,
            returnStatus: 5
          })
        })
      } else {
        this.operationAmount.forEach((e) => {
          this.auditRecordVoList.push({
            operationId: this.userId,
            operationName: this.userName,
            owerType: 1,
            ownerId: e.id,
            remark: this.formData.remarks,
            statue: 2,
            type: 1
          })
          this.itemVoList.push({
            id: e.id,
            returnStatus: 2
          })
        })
      }
      const params = {
        itemVoList: this.itemVoList,
        auditRecordVoList: this.auditRecordVoList,
        displayLength: 10,
        displayStart: 0,
        returnOrderId: this.id
      }
      approvalReturn(params)
        .then((res) => {
          this.pageLoading = false
          if (res) {
            if (Number(res.code) === 1) {
              if (res.obj.refundNo) {
                this.returnedNo = res.obj.refundNo
                this.returnedId = res.obj
                this.successDialog = true
              }
            } else {
              this.$confirm(res.code, {
                confirmButtonText: '确定',
                showCancelButton: false
              })
            }
          }
          this.isDeliveryDialog = false
          this.fetchList()
        })
        .catch(() => {
          this.isDeliveryDialog = false
        })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.footer {
  width: 100%;
  margin: 0;
}
.detail-section {
  h2 {
    margin: 15px 0;
    font-weight: bold;
  }
}
/deep/ .el-form-item {
  margin-bottom: 0;
}
// /deep/ .el-dialog__body {
//   padding: 0 20px !important;
// }
.dialog-footer {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}
.table-btn {
  margin-bottom: 10px;
}
.addReturnInfoCentent {
  margin: 10px 0;
}
</style>
